<!-- banner管理 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <div class="title-label display-flex">
      <span class="flex-1">banner管理</span>
      <div>
        <n-button type="info" size="medium" @click="upData">保存</n-button>
      </div>
    </div>
    <div class="btm mt10 pt10 dfdfsrer">
      <div
        class="bannerBox vertical-center sz"
        v-for="(item, idx) in bannerList"
        :key="idx"
      >
        <!-- <img
          src="../../../assets/img/close.png"
          class="closeimg"
          @click="delimg(idx)"
        /> -->
        <n-image :src="item" class="dsfsrtterr" />
        <div class="caozuoeerrw vertical-center cf">
          <div class="cf w100 pd cen display-flex dsfsdrerer">
            <div class="flex-1" v-if="idx != 0" @click="huanweiz(1, idx)">
              <i class="iconfont dx-houtui fz40 sz"></i>
            </div>

            <div class="flex-1" @click="delimg(idx)">
              <i class="iconfont dx-shanchu fz40 sz"></i>
            </div>
            <div
              class="flex-1"
              v-if="bannerList.length - 1 > idx"
              @click="huanweiz(2, idx)"
            >
              <i class="iconfont dx-qianjin fz40 sz"></i>
            </div>
          </div>
        </div>
      </div>

      <div
        class="bannerBox vertical-center sz"
        @click="photoShowModaler = true"
      >
        <div class="cen">
          <img src="../../../assets/img/upimg.png" class="upimg" />
          <p class="z9 fz14">点击上传banner</p>
        </div>
      </div>
    </div>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传banner</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="kxbanner"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { ref } from "vue";
import photoGallery from "../../../components/util/photoGallery";
import { dxget, dxpost } from "../../../util/index";
const photoShowModaler = ref(null);
const bannerList = ref([]);
let imgurl = "";
const getImger = (data) => {
  imgurl = data;
};
const geturler = () => {
  if(imgurl){
    bannerList.value.push(imgurl);
  }
 
  photoShowModaler.value = false;
};
const delimg = (idx) => {
  bannerList.value.splice(idx, 1);
};

const initData = async () => {
  const { data }: any = await dxget("kx/kxconfig", { id: 1 });
  if (data.parameterc) {
    bannerList.value = data.parameterc.split(",");
  }
};
const huanweiz = (type, idx) => {
  const dsfdsra = bannerList.value[idx],
    dsfdsrb = bannerList.value[idx + 1],
    dsfdsrc = bannerList.value[idx - 1];
  if (type == 2) {
    bannerList.value[idx] = dsfdsrb;
    bannerList.value[idx + 1] = dsfdsra;
  }
  if (type == 1) {
    bannerList.value[idx] = dsfdsrc;
    bannerList.value[idx - 1] = dsfdsra;
  }
};
const upData = async () => {
  const { errno }: any = await dxpost(
    "kx/kxconfig",
    {
      id: 1,
      parameterc: bannerList.value.join(","),
    },
    "put"
  );
  if (errno == 0) {
    window.$message.success("修改成功！");
  }
};
initData();
</script>
 <style scoped>
.dfdfsrer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.bannerBox {
  height: 250px;
  background: #f8f8f8f8;
  position: relative;
}
.upimg {
  width: 80px;
}
.closeimg {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 30px;
}
.bannerBox:hover .caozuoeerrw {
  display: flex;
}
</style>